<template>
  <div ref="chartDom" class="pie" />
</template>

<script>
// 全部引入
import * as echarts from 'echarts'
import { getAgentsList } from '@/api/agents'
import { getclients } from '@/api/clients'

export default {
  data() {
    return {
      paging: {
        name: ''
      },
      name: [],
      value: []
    }
  },

  async mounted() {
    // 页面一打开就渲染了视图 需要异步操作 发请求 async await
    await this.getAgentsList()
    await this.getclients()
    this.pieList = []
    for (let i = 0; i < this.name.length; i++) {
      const d = new Object()
      d.name = this.name[i]
      d.value = this.value[i]
      this.pieList.push(d)
      console.log(this.pieList.push(d))
    }
    console.log(this.pieList)

    // 获取渲染雷达图的dom标签
    const chartDom = this.$refs.chartDom
    // 初始化雷达图
    const myChart = echarts.init(chartDom)
    var option
    option = {
      title: {
        text: '客户经理',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },

      series: [
        {
          name: '客户数量',
          type: 'pie',
          radius: '50%',
          data: this.pieList,
          // [
          //   { value: 1048, name: 'Search Engine' },
          //   { value: 735, name: 'Direct' },
          //   { value: 580, name: 'Email' },
          //   { value: 484, name: 'Union Ads' },
          //   { value: 300, name: 'Video Ads' }
          // ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }

    option && myChart.setOption(option)
  },
  methods: {
    // 获取经理列表
    async getAgentsList() {
      const res = await getAgentsList(this.paging)
      this.name = res.data.map(item => {
        // 遍历拿到每一个经理名字
        return item.name
      })
    },
    // 获取用户列表
    async getclients() {
      const res = await getclients()
      this.value = res.data.map(item => {
        // 遍历拿到每一个客户名字
        return item.name
      })
    }

  }
}
</script>

<style scoped>
.pie {
  height: 536px;
}
</style>
